<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="description" content="不超过150个字符" />
    <meta name="keywords" content="" />
    <meta content="caibaojian" name="author" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="../static/css/detail.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <!-- 设计稿 1rem = 100px -->
    <script src="../static/js/flexible.js"></script>
    <!-- 滚动插件 -->
    <script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>
    <title>商品详情</title>
</head>

<body>
    <div class="detail-container">
        <div class="top-bar"><span class="goback"></span>商品详情</div>

        <!-- swiper 轮播-->
        <div class="swiper-container swiper1">
                <div class="swiper-wrapper">
                    <a class="swiper-slide"><img src="../../static/images/index/img_1.png" alt=""></a>
                    <a class="swiper-slide"><img src="../../static/images/index/img_5.png" alt=""></a>
                    <a class="swiper-slide"><img src="../../static/images/index/img_6.png" alt=""></a>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                
                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->
                
                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
        </div>

        <!-- 滑动层 -->
        <div class="scroll-wrapper">
            <div class="scroll-content">
                <!-- 名称价格 -->
                <div class="title flex-r-b">
                    <div class="left">
                        <p class="name ellipsis">法式布蕾蛋糕 Pandora</h3>
                        <p>副本描述/商品规格</p>
                    </div>
                    <span class="price">￥178</span>
                    
                </div>
                <!-- 基本参数 -->
                <h3>参数详情</h3>
                <div class="icon flex-r-b">
                    <div class="left"></div>
                    <div class="right flex-c-b">
                        <p>1件商品</p>
                        <p>含五件餐具</p>
                        <p>适合4-6人分享</p>
                    </div>
                </div>
                <!-- 规格 -->
                <h3>规格选择</h3>
                <div class="size-box">
                    <div class="flex-r-b">
                        <label class="radio-label" for='size1'>
                            <input type="radio" name='size' id='size1' checked/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>
                        <label class="radio-label" for='size2'>
                            <input type="radio" name='size' id='size2'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>
                        <label class="radio-label" for='size3'>
                            <input type="radio" name='size' id='size3'/>
                            <span class="size-checked">6寸 15cmX15cm</span>
                        </label>
                    </div>
                </div>
                <!-- 介绍与评价 tab分页-->
                <div class="description-wrapper ">
                    <div class="swiper-container swiper2">
                        <div class="swiper-wrapper">
                            <!-- //商品介绍 tab -->
                            <div class="swiper-slide tab1">
                                <div class="title">产品介绍</div>
                                <div class="content">
                                    <p>浓郁香醇的巧克力，点缀颗颗坚果</p>
                                    <p>浓郁香醇的巧克力，点缀颗颗坚果</p>
                                    <p>口味： 巧克力味</p>
                                    <p>甜度：<span>&nbsp★&nbsp</span><span>&nbsp★&nbsp</span><span>&nbsp★&nbsp</span><span>&nbsp☆&nbsp</span><span>&nbsp☆&nbsp</span></p>
                                    <p>原材料：<span>巧克力、</span><span>巧克力、</span><span>巧克力、</span><span>巧克力、</span><span>巧克力、</span><span>巧克力、</span><span>巧克力、</span></p>
                                    <div class="img">
                                        <img src="../../static/images/index/img_8.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- 商品评价 tab -->
                            <div class="swiper-slide tab2">
                                <img src="../../static/images/index/img_5.png" alt="">
                                <div class="tab-content">
                                    <p>1231</p>
                                    <p>1231</p>
                                    <p>1231</p>
                                    <p>1231</p>
                                    <p>1231</p>
                                    <p>1231</p>
                                </div>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>

            </div>
        </div>

        <!-- 添加到购物车 -->
        <div class="bottom-bar flex-r-b">
            <div class="cart"><span class="count">88888</span></div>
            <div class="btn addToCart">加入购物车</div>
            <div class="btn">立即购买</div>
        </div>
    </div>
</body>
<script>
    // 阻止整个页面滚动
    document.addEventListener('touchmove', function(event) {
      event.preventDefault();
    }, {passive:false});
  window.onload = function () {
        initSwiper1()
        initScroll()
        goBack()
        animateCount()
    }
    // 路由返回
    function goBack(){
        document.querySelector('.goback').ontouchend = function(){
            window.history.go(-1)
        }
    }
    //初始化 swiper
    function initSwiper1(){
        var swiper1 = new Swiper ('.swiper1', {
            iOSEdgeSwipeDetection : true,
            iOSEdgeSwipeThreshold : 50,
        //   direction: 'vertical', // 垂直切换选项
        // autoplay:{
        //     disableOnInteraction : false,
        // },
        // loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination'
        }
        
        // 如果需要前进后退按钮
        //   navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        //   },
        
        // 如果需要滚动条
        //   scrollbar: {
        //     el: '.swiper-scrollbar',
        //   },
        })        
    }

    //初始化 滚动 
    function initScroll(){
        //滚动
        var myScroll = new BScroll('.scroll-wrapper',{
            probeType:3,
            click: true,
            tap: true
        })
        // 描述与评价 tab分页 swiper2
        var txt = ['商品详情', '商品评价']
        var swiper2 = new Swiper('.swiper2', {
            iOSEdgeSwipeDetection : true,
            iOSEdgeSwipeThreshold : 50,
            spaceBetween: 5,
            autoHeight: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + txt[index] + '</span>';
                },
            }
        })

        swiper2.on('slideChange', function () {
            //手动刷新 滚动层
            myScroll.refresh()
            console.log(this.activeIndex)
        })
        //swiper1 滑动与放大效果
        var swiper1 = document.querySelector('.swiper1')
        myScroll.on('scroll',function({y}){
            if(y >= 0){
                var precent = 1 + 0.5*y/swiper1.offsetHeight;
                swiper1.style.transformOrigin = 'center top'
                swiper1.style.transform = `scale(${precent})`
            }else {
                swiper1.style.transform = `translate3d(0,${y*0.3}px,0)`
            }
        })
    }

    // 购物车计数动画
    function animateCount(){
        var add = document.querySelector('.addToCart')
        var count = document.querySelector('.count')
        var flag = false
        add.ontouchmove = function(event){
            flag = true
        }
        add.ontouchend = function(){
            if(flag) return flag = false
            flag = true
            console.log('add')
            count.classList.add('scaleCount')
            setTimeout(() => {
                flag = false
                count.classList.remove('scaleCount')
            }, 500);
        }       
    }
</script>
</html>